<template>
	<view class="statistical">
		<view class="statistical-item">
			<image src="@/static/images/home/level_1.png" class="icon" />
			<view class="bottom">
				<view class="u-flex u-flex-col u-col-top">
					<text class="name">一级经销商</text>
					<text class="name">总数量</text>
				</view>
				<text class="count">{{level1}}</text>
			</view>
		</view>
		<view class="statistical-item">
			<image src="@/static/images/home/level_2.png" class="icon" />
			<view class="bottom">
				<view class="u-flex u-flex-col u-col-top">
					<text class="name">二级经销商</text>
					<text class="name">总数量</text>
				</view>
				<text class="count">{{level2}}</text>
			</view>
		</view>
		<view class="statistical-item">
			<image src="@/static/images/home/level_3.png" class="icon" />
			<view class="bottom">
				<view class="u-flex u-flex-col u-col-top">
					<text class="name">门店</text>
					<text class="name">总数量</text>
				</view>
				<text class="count">{{level3}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "statistics-card",
		props: {
			level1: {
				type: Number,
				default: 0
			},
			level2: {
				type: Number,
				default: 0
			},
			level3: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.statistical {
		height: 172rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 5rpx 1rpx rgba(12, 6, 9, 0.07);
		border-radius: 12rpx;
		margin: 0 auto;

		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(1, 100%);


		.statistical-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			box-sizing: border-box;
			padding: 0 30rpx;

			.icon {
				height: 64rpx;
				width: 64rpx;
			}

			.bottom {
				margin-top: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.name {
					display: inline-block;
					font-size: 18rpx;
					font-family: NotoSansHans;
					font-weight: 400;
					color: #898B8F;
					height: 40rpx;
					overflow: hidden;
				}


				.count {
					font-size: 35rpx;
					font-family: NotoSansHans;
					font-weight: bold;
					color: #FF7A23;
				}
			}
		}
	}
</style>
